<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js图像幻灯片带滤镜轮播百叶窗幻灯片</title>
<meta name="description" content="js图像幻灯片制作一个带滤镜轮播效果的焦点图片展示，带百叶窗效果的焦点图片幻灯片。js代码。" />
</head>

<body>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% "宋体";}
a{color:#424242;text-decoration:none;}
a:hover{color:#f00;text-decoration:underline;}
/* focus_img */
.focus_img{width:690px;margin:20px auto;border:#d4d4d4 1px solid;background:url(images/m_cl_001.gif) repeat-x;overflow:hidden;zoom:1;height:295px}
.focus_img .big_area{border:#fd6500 1px solid;display:inline;float:left;margin:8px 0px 0px 10px;overflow:hidden;width:418px;position:relative;height:278px}
.focus_img .big_area h3{font-weight:normal;font-size:18px;left:0px;margin:0px;overflow:hidden;width:418px;color:#000;bottom:0px;line-height:34px;font-family:黑体;position:absolute;height:32px;text-align:center}
.focus_img .big_area img{filter:revealtrans(duration=1,transition=5)}
.focus_img .big_area .titlebg{background:#fff;filter:alpha(opacity=60);left:0px;width:418px;bottom:0px;position:absolute;height:32px;opacity:0.6}
.focus_img .thurmb{padding:0px 8px 0 0;float:right;width:246px;}
.focus_img .thurmb .small_div{margin-top:8px;background:url(images/m_cl_002.gif) no-repeat;overflow:hidden;width:247px;cursor:pointer;height:64px}
.focus_img .thurmb .selected{background-position:0px -136px;color:#fff}
.focus_img .thurmb .selected img{border-color:#ecd8cf;}
.focus_img .thurmb .selected a{color:#fff;text-decoration:none}
.focus_img .thurmb img{border:#ccc 1px solid;display:inline;float:left;margin:4px 0px 0px 16px;width:81px;height:54px}
.focus_img .thurmb .small_div span{padding:5px 0 0 4px;display:block;margin-left:103px;line-height:19px;}
</style>

<script type="text/javascript">
function FocusImg(bigDiv,smallDiv,titleDiv,imgW,imgH,imgList,sTime,introDiv)
{
	var $=function (obj){return document.getElementById(obj);}
	this.bigDiv=bigDiv;this.smallDiv=smallDiv,this.imgW=imgW;this.imgH=imgH;
	this.imgList=[];
	this.sTime=sTime;
	this.titleDiv=titleDiv;
	this.introDiv=introDiv;
	var scrollDiv;
	var smallImgList=[];
	var imgHeight,_bigDiv;
	var timer,autoTimer;
	var ctitle;
	var t=this;
	var cintro;
	this.curId=0;
	var smallPicArr=[];
	var mypic=document.createElement("img");
	var mypicLink=document.createElement("a");
	this.init=function()//初始化
	{						
		mypic.width=this.imgW;
		mypic.height=this.imgH;
		imgHeight=this.imgH;
		_bigDiv=this.bigDiv;
		_titleDiv=this.titleDiv;
		_introDiv=this.introDiv;
		_imgList=this.imgList;
		scrollDiv=document.createElement("div");
		mypicLink.target="_blank";
		mypicLink.appendChild(mypic);
		scrollDiv.appendChild(mypicLink);

		for ( var i = 0; i < this.imgList.length ; i++ )
		{

			//创建小图区域
			var slspan=document.createElement("div");
			slspan.className="small_div";
			var slimglink=document.createElement("a");
			slimglink.target="_blank";
			slimglink.href=this.imgList[i].url;
			var slimg=document.createElement("img");
			slimg.src=this.imgList[i].bigimg;
			slimglink.appendChild(slimg);
			slimglink.innerHTML += this.imgList[i].intro;
			slspan.appendChild(slimglink);
			smallPicArr.push(slspan);
			(function(){
				var itemid=i;				
				slspan.onmouseover=function()
				{
					t.doPic(itemid);
					t.curId=itemid;
					clearInterval(autoTimer);
					t.autoPlay();
				}

			})();
			$(this.smallDiv).appendChild(slspan);

		}
		$(this.bigDiv).style.width=this.imgW+"px";
		$(this.bigDiv).style.height=this.imgH+"px";
		$(this.bigDiv).style.overflow="hidden";
		$(this.bigDiv).appendChild(scrollDiv);
		this.doPic(0);

	};
	this.doPic=function(id)
	{		
		try{clearTimeout(timer)}catch(e){};
		$(this.titleDiv).innerHTML=this.imgList[id].title;
		if ($(this.introDiv) && this.imgList[id].intro)
			$(this.introDiv).innerHTML=this.imgList[id].intro ;
		else if($(this.introDiv) || (!this.imgList[id].intro))
			$(this.introDiv).innerHTML="";
		//animate($(this.bigDiv).scrollTop,id * imgHeight);
		mypicLink.href=this.imgList[id].url;
		if (document.all)
		{
			mypic.filters.revealTrans.Transition=23;
			mypic.filters.revealTrans.apply();
			mypic.filters.revealTrans.play();
		}
		mypic.src=this.imgList[id].bigimg;
		//小图区域特效
		for (i = 0; i < smallPicArr.length ; i++ )
		{
			smallPicArr[i].className = smallPicArr[i].className.replace("selected" , "");
		}
		smallPicArr[id].className += " selected";
	}
	this.autoPlay=function()
	{
		autoTimer=setInterval(function(){
			t.curId++;
			if (t.curId >= t.imgList.length)
			  t.curId = 0 ;
			t.doPic(t.curId);
		},this.sTime);
	}
	function callback(v)
	{
		$(_bigDiv).scrollTop = v;
	}
	function animate(beginV,endV)
	{
		x = endV - beginV;
		beginV += (x/4);
		if (Math.abs(beginV-endV) <= 1)
		{
			beginV = endV ;
			callback(endV);
		}
		else
		{			
			callback(beginV);
			timer=setTimeout(function(){animate( beginV  , endV)},10);
		}
	}
}
</script>


<div class="focus_img">
<div class="big_area">
	<div class="big_img" id="con_1"></div>
	<div class="titlebg"></div>
	<h3 id="h2title"></h3>
	<div id="intro" style="dispaly:none;"></div>
</div>

<div class="thurmb" id="con_2"></div>

</div><!--focus_img end-->

<script type="text/javascript">
var focusImg= new FocusImg();
focusImg.bigDiv="con_1";
focusImg.smallDiv="con_2";
focusImg.imgW=418;
focusImg.imgH=278;
focusImg.sTime=5000;
focusImg.titleDiv="h2title";
focusImg.introDiv="intro";

var s = {};
s.bigimg="images/pic01.jpg";
s.title="jquery图片滚动插件";
s.intro="<span>jquery图片滚动插件制作焦点图片滚动或列表图片滚动</span>";
s.url="http://www.17sucai.com/";
focusImg.imgList.push(s);

var s = {};
s.bigimg="images/pic02.jpg";
s.title="jquery导航菜单";
s.intro="<span>jquery导航菜单二级菜单slide滑动渐隐显示</span>";
s.url="http://www.17sucai.com/";
focusImg.imgList.push(s);

var s = {};
s.bigimg="images/pic03.jpg";
s.title="jquery选项卡插件";
s.intro="<span>jquery选项卡插件制作多种滑动slide选项卡切换和fade选项卡切换等</span>";
s.url="http://www.17sucai.com/";
focusImg.imgList.push(s);

var s = {};
s.bigimg="images/pic04.jpg";
s.title="jquery无缝滚动插件";
s.intro="<span>jquery无缝滚动插件支持图片无缝滚动或文字无缝滚动</span>";
s.url="http://www.17sucai.com/";
focusImg.imgList.push(s);

focusImg.init();
focusImg.autoPlay();
</script>

</body>
</html>